<template>
    <div class="fn_nav_bar">
        <van-row>
            <van-col span="16">
                <div class="fn_nav_bar_left">
                    <span class="fn_nav_bar_left_icon">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-029-chat"></use>
                        </svg>
                    </span>
                    <span v-text="title"></span>
                </div>
            </van-col>
            <van-col span="8">
                <div class="fn_nav_bar_close">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script lang="ts">
export default{
    props: {
        title: {
            type: String
        }
    },
    setup() {
    }
}
</script>

<style lang="scss" scoped>
.fn_nav_bar{
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #F1F1F1;
    user-select: none;
    &_left{
        padding-left: 20px;
        font-weight: bold;
        color: #333;
        &_icon{
            .icon{
                width: 20px;
                height: 20px;
                color: #58AEFF;
                margin-right: 10px;
                vertical-align: text-bottom;
            }
        }
    }
    &_close{
        text-align: right;
        padding-right: 20px;
        .icon{
            width: 19px;
            height: 19px;
            color: #696969;
            cursor: pointer;
        }
    }
}
</style>